<template>
  <div id="main1">
    <a id="first1" href="https://www.4399.com/" ><img src="../../public/1/休闲4.png" alt="休闲" title="休闲"></a>
    <a id="second1" href="https://www.4399.com/"><img src="../../public/1/休闲2.png" alt="休闲" title="休闲" height="390px"></a>
    <a id="third1" href="https://www.4399.com/"><img src="../../public/1/休闲3.jpg" alt="休闲" title="休闲" height="330px"></a>
    <a id="forth1" href="https://www.4399.com/"><img src="../../public/1/休闲.jpg" alt="休闲" title="休闲"></a>
  </div>
</template>

<script>
export default {
  name: "RelaxGameBody"
}
</script>

<style scoped>
#main1 {
  position: relative;
  width: 80%;
  height: 500px;
  margin: auto;
}
div {
  position: center;
}
a {
  display: inline-block;
  margin: auto;

}
#first1{
  position: absolute;
  bottom:-18px;
  left:230px;
}
#second1{
  position: absolute;
  bottom:-18px;
  right:230px;
}
#third1{
  position: absolute;
  bottom:-530px;
  left:230px;
  height:280px;
}
#forth1 {
  position: absolute;
  bottom:-530px;
  right:230px;
}
img {
  width: 400px;
}

</style>